<template>
	<section v-loading="listLoading">
		
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.orderSn" placeholder="订单号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.name" placeholder="收货人姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.phone" placeholder="收货人手机号码"></el-input>
				</el-form-item>
				<el-form-item prop="userId">
			        <el-select v-model="filters.userId" clearable filterable remote reserve-keyword placeholder="请输入下单用户手机号码" :remote-method="remoteMethod">
                        <el-option v-for="item in userList" :key="item.id" :label="item.label" :value="item.id"></el-option>
                    </el-select>
			    </el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" v-on:click="handleCurrentChange(1)">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="users" stripe highlight-current-row @selection-change="selsChange" border style="width: 100%;">
			<el-table-column label="订单号" prop="orderSn" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column label="下单人信息" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<div v-if="scope.row.userInfo">{{scope.row.userInfo.nickname}}</div>
	        		<div v-if="scope.row.userInfo">{{scope.row.userInfo.mobile}}</div>
	        	</template>
	        </el-table-column>
	        <el-table-column label="收货/自提人信息" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<div>{{scope.row.consignee}}</div>
	        		<div>{{scope.row.mobile}}</div>
	        	</template>
	        </el-table-column>
	        <el-table-column prop="address" label="收货地址" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column label="商品信息" prop="goodsInfo.name" min-width="80" align="center">
	        	<template slot-scope="scope">
            		<el-button size="small" type="text"  @click="handlegoods(scope.row)">商品信息</el-button>
            	</template>
	        </el-table-column>
	        <el-table-column prop="message" label="备注" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column prop="freightPrice" label="运费" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column prop="couponPrice" label="优惠金额" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column prop="orderPrice" label="实际支付金额" min-width="80" align="center">
	        </el-table-column>
	        
	        <el-table-column prop="payName" label="支付方式" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column label="支付时间" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<span>{{timestampFormat(scope.row.payTime)}}</span>
	        	</template>
	        </el-table-column>
	        <el-table-column prop="shipChannel" label="快递名称" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column prop="shipSn" label="快递单号" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column label="发货时间" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<span v-if="scope.row.freightType==0">{{timestampFormat(scope.row.shipTime)}}</span>
	        	</template>
	        </el-table-column>
	        <!--<el-table-column prop="takeImg" label="自提图片" align="center" width="80">
                <template slot-scope="scope">
                	<div v-if="scope.row.takeImg">
                		<el-popover placement="top-start" title="" trigger="click" v-for="item in JSON.parse(scope.row.takeImg)">
	                		<img :src="item" alt="" style="width: 500px;"/>
	                		<img slot="reference" :src="item" style="width: 50px;height: 50px;object-fit: cover;"/>
	                	</el-popover>
                	</div>
                </template>
            </el-table-column>-->
	        <el-table-column label="类型" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<span>{{scope.row.freightType===0?'邮寄':'自提'}}</span>
	        	</template>
	        </el-table-column>
	        <el-table-column label="状态" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<span>已完成</span>
	        	</template>
	        </el-table-column>
			<el-table-column prop="addTime" label="创建时间" :formatter="formatDate"  min-width="110" align="center">
			</el-table-column>
			<el-table-column label="操作" width="100" align="center">
				<template slot-scope="scope">
					<el-button v-if="scope.row.freightType==0" size="mini" plain type="success" @click="handleLogisticeInfo(scope.row)">查看物流</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<!--规格-->
        <el-dialog :visible.sync="goodsVisible" :close-on-click-modal="false"  title="商品信息" width="800px">
            <el-table ref="table" :data="goodsList" size="small" style="width: 100%;" border  stripe highlight-current-row>
	        	<el-table-column  label="图片" width="80" align="center">
		            <template slot-scope="scope">
	    	    	    <el-popover placement="top-start" title="" trigger="click">
	                        <img :src="scope.row.picUrl" alt="" style="width: 500px;">
	                        <img slot="reference" :src="scope.row.picUrl" style="width: 40px;height: 40px;object-fit: cover;border-radius: 5px;">
	                    </el-popover>
			        </template>
		        </el-table-column>
		        <el-table-column prop="goodsName" label="名称" min-width="50" align="center">
		        </el-table-column>
		         <el-table-column  prop="specifications[0]" label="规格" min-width="50" align="center">
		        </el-table-column>
		        <el-table-column  prop="price" label="价格" min-width="50" align="center">
		        </el-table-column>
		        <el-table-column prop="number" label="数量" min-width="50" align="center">
		        </el-table-column>
	        </el-table>
        </el-dialog>
        <!--物流-->
		<el-dialog title="物流详情" :visible.sync="logsiFormVisible" :close-on-click-modal="false" width="500px">
			<div class="logistics">
				
				<div class="logisticsDetail">
					<div class="logisticsDetailname">{{logData.shipperName}}：{{logData.shipperSn}}</div>
				    <div class="logisticsDetailItem" v-for="(item,index) in logData.dataList">
				      <div class="logisticsDetailItemLeft">
				        <div v-if="index==0" class="activelogisticsDetailItemLeftPoint"></div>
				        <div v-else class="logisticsDetailItemLeftPoint"></div>
				        <div class="logisticsDetailItemLeftLine" v-if="index != list.length-1"></div>
				      </div>
				      <div class="logisticsDetailItemRight">
				      	<span v-if="index==0" class="activelogisticsDetailItemRightText">{{item.context}}</span>
				        <span v-if="index !==0" class="logisticsDetailItemRightText">{{item.context}}</span>
				        <span v-if="index==0" class="activelogisticsDetailItemRightText1">{{item.time}}</span>
				        <span v-if="index !==0" class="logisticsDetailItemRightText1">{{item.time}}</span>
				      </div>
				    </div>
				</div>
			</div>
		</el-dialog>
        
	</section>
</template>

<script>
	import { client } from '../../common/js/alioss'
	export default {
		data() {
			return {
				filters: {
					phone: '',
					name:'',
					orderSn:'',
					userId:''
				},
				userList:[],
				users: [],
				option:[],
				list:[],
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				photoFormVisible: false,
				goodsList:[],
				goodsVisible:false,
				logsiFormVisible:false,
			    logList:[],
			    logData:{},
			}
		},
		methods: {
			zeroize(num) {
                return (String(num).length == 1 ? "0" : "") + num;
            },
            timestampFormat(timestamp) {
                var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
                var timestampDiff = curTimestamp - parseInt(timestamp / 1000); // 参数时间戳与当前时间戳相差秒数
                var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
                var tmDate = new Date(parseInt(timestamp / 1000) * 1000); // 参数时间戳转换成的日期对象
                var Y = tmDate.getFullYear(),
                m = tmDate.getMonth() + 1,
                d = tmDate.getDate();
                var H = tmDate.getHours(),
                i = tmDate.getMinutes(),
                s = tmDate.getSeconds();
                return (Y + "-" + this.zeroize(m) + "-" + this.zeroize(d) + " " + this.zeroize(H) + ":" + this.zeroize(i) + ":" + this.zeroize(s));
            },
			//时间转换开始时间 
			formatDate(row, column) {
                let date = new Date(parseInt(row.addTime));
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s;
            },
            
            selsChange: function (sels) {
				this.sels = sels;
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取列表
			getUsers:function (){
				this.listLoading = true;
				let para = {
					page: this.page,
					size: this.pageSize,
					phone: this.filters.phone,
					name: this.filters.name,
					orderSn: this.filters.orderSn,
					userId: this.filters.userId,
					status: 4
				};
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
			    });  
			    instance.post('admin/order/orderList', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.total = res.total;
						this.users = res.rows;
						this.listLoading = false;
					}
				});
			},
			
			
			//商品信息
			handlegoods(row){
				this.goodsList = row.goodsList
				this.goodsVisible = true
			},
			remoteMethod(query){
				if (query !== '') {
		          setTimeout(() => {
		            this.getUserList(query)
		          }, 200);
		        } else {
		          this.userList = [];
		        }
			},
			//搜索获取用户
			getUserList(query){
				let para = {
					phone: query,
				};
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/common/getUserSelectEntity', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					this.userList = res;
				}); 
			},
			
			//查看物流详情
		    handleLogisticeInfo(row){
		    	this.logsiFormVisible = true
		    	this.logList = []
		    	let params = {
		    		orderId:row.id
		    	}
		    	var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/order/queryLogistics', this.qs.stringify(params)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.logData = res.data
					}
				});
		    },
			
		},
		mounted() {
			this.getUsers();
		}
	}

</script>
<style>
	.detail{
	  	display: flex;
	  	flex-direction: row;
	  	padding: 10px 0px;
	}
	.detailDiv{
	  	font-weight: bold;
	  	color: #000000;
	  	width: 150px;
	}
	.detailDiv1{
	  	color: #000000;
	}
	
	.logistics{
	  padding: 24rpx;
	}
	.logisticsTop{
	  display: flex;
	  flex-direction: row;
	}
	.logisticsTopImg{
	  width: 24px;
	  height: 24px;
	  margin-top: 8px;
	}
	.logisticsTopView{
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  margin-left: 8px;
	}
	.logisticsTopViewText{
	  font-size: 14px;
	  font-family: PingFang SC;
	  font-weight: bold;
	  line-height: 20px;
	  color: #000000;
	}
	.logisticsTopViewNo{
	  margin-top: 8px;
	  font-size: 14px;
	  font-family: PingFang SC;
	  font-weight: 400;
	  line-height: 20px;
	  color: #8D8D8D;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	.logisticsTopViewNo image{
	  width: 34px;
	  height: 16px;
	  margin-left: 14px;
	}
	.logisticsTopViewText1{
	  margin-top: 8px;
	  font-size: 14px;
	  font-family: PingFang SC;
	  font-weight: 400;
	  line-height: 20px;
	  color: #8D8D8D;
	}
	.logisticsDetail{
	  padding: 0px 7px 22px 7px;
	  background: #FFFFFF;
	  border-radius: 10px;
	}
	.logisticsDetailItem{
	  display: flex;
	  flex-direction: row;
	  padding-bottom: 20px;
	}
	.logisticsDetailItemLeft{
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin-top: 5px;
	}
	.activelogisticsDetailItemLeftPoint{
	  width: 11px;
	  height: 11px;
	  background: #00C751;
	  border-radius: 50%;
	}
	.logisticsDetailItemLeftPoint{
	  width: 9px;
	  height: 9px;
	  background: #F6F6F6;
	  border-radius: 50%;
	}
	.logisticsDetailItemLeftLine{
	  margin-top: 5px;
	  flex: 1;
	  border: 1px solid #F6F6F6;
	}
	.logisticsDetailItemRight{
	  margin-left: 10px;
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	}
	.activelogisticsDetailItemRightText{
	  font-size: 14px;
	  font-family: PingFang SC;
	  font-weight: 400;
	  line-height: 20px;
	  color: #000000;
	}
	.logisticsDetailItemRightText{
	  font-size: 14px;
	  font-family: PingFang SC;
	  font-weight: 400;
	  line-height: 20px;
	  color: #8D8D8D;
	}
	.activelogisticsDetailItemRightText1{
	  margin-top: 4px;
	  font-size: 12px;
	  font-family: PingFang SC;
	  font-weight: 400;
	  line-height: 17px;
	  color: #000000;
	}
	.logisticsDetailItemRightText1{
	  margin-top: 4px;
	  font-size: 12px;
	  font-family: PingFang SC;
	  font-weight: 400;
	  line-height: 17px;
	  color: #8D8D8D;
	}
	.logisticsDetailname{
		padding-bottom: 20px;
		font-size: 16px;
	    font-family: PingFang SC;
	    font-weight: 400;
	    line-height: 20px;
	    color: #000000;
	}
</style>
